<template>
    <div class="divnn">
        <img @click="quitApp" class="tuichu" src="../../assets/tuichu2.png" />
        <!-- <div class="shiyong">技术提供试用</div> -->
        <!-- 抽奖整个环节是否结束  hasover为true 表示结束了 -->
        <div v-if="hasover">
            <div class="boxs">
                <img class="wenzi" src="../../assets/reslut.png" style="width: 1300px">
                <div class="lottery_scroll_box_1_mian">
                    <!-- 显示所有20个幸运号码 -->
                    <ul class="lottery_scroll_1 flex11" style="width: 1145px">
                        <li class="lottery_items" v-for="(num, index) in luckyNumbers" :key="index"
                            style="width:14%;line-height: 144px;">
                            <div class="bigyuan" style="margin:6px;">
                                <img class="yuan" src="../../assets/usercircle4.png">
                                <span class="itemtxts">{{ num }}</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div v-if="!hasover">
            <!-- 还没开始抽奖 最开始的时候 -->
            <div class="boxs" v-if="!starts && isthebegin == false">
                <img class="wenzi" src="../../assets/wenzi2.png">
                <img class="title" src="../../assets/xyhtitle.png">
                <img class="kaishi" @click="playAudio" src="../../assets/startbtn3.png">
            </div>
            <div class="boxs" v-if="starts && hasStop == false">
                <div class="lottery_scroll_box_1_mian" :class="starts ? 'showstart' : 'noshow'">
                    <!-- 快速滚动的随机数 -->
                    <ul class="lottery_scroll_1">
                        <li class="lottery_items" v-for="(num, index) in randomNumbers" :key="index">
                            <div class="bigyuan">
                                <img class="yuan" src="../../assets/usercircle4.png">
                                <span class="itemtxts" style="font-size:80px">{{ num }}</span>
                            </div>
                        </li>
                    </ul>
                </div>

                <!-- 开始抽奖的按钮 -->
                <img class="kaishi" style="margin-top:100px" @click="stopchou" src="../../assets/stopbtn.png">
            </div>
            <div class="boxs" v-if="starts && hasStop == true">
                <div class="tops">
                    <img class="jiang" src="../../assets/winerbg2.png">
                    <!-- 显示所有20个幸运号码 -->
                    <ul class="lottery_scroll_1 flex11" style="width: 1451px; margin-top: -9px;">
                        <li class="lottery_items" v-for="(num, index) in luckyNumbers" :key="index">
                            <div class="bigyuan">
                                <img class="yuan" src="../../assets/usercircle4.png">
                                <span class="itemtxts">{{ num }}</span>
                            </div>
                        </li>
                    </ul>
                    <!-- 结束抽奖按钮 -->
                    <!-- <img class="close" src="../../assets/closebtn2.png" @click="closeto" style="margin-top: 50px;"> -->
                </div>
            </div>
        </div>

        <!-- <video v-if="!starts && isthebegin == true" src="https://5201314qaz.oss-cn-beijing.aliyuncs.com/ls/bgg.mp4"
            style="object-fit:fill;" autoplay="autoplay" autobuffer="" autoloop="" loop="" width="100%"
            height="100%"></video> -->
        <video v-if="!starts && isthebegin == false" src="https://5201314qaz.oss-cn-beijing.aliyuncs.com/ls/bgg2.mp4"
            style="object-fit:fill;" autoplay="autoplay" autobuffer="" autoloop="" loop="" width="100%"
            height="100%"></video>
        <video v-if="starts && isthebegin == false" src="https://s.17iu8.com/res/video/81.mp4" style="object-fit:fill;"
            autoplay="autoplay" autobuffer="" autoloop="" loop="" width="100%" height="100%"></video>
    </div>
</template>

<script>
import axios from 'axios';
import { EventBus } from '../event-bus.js'
import { ipcRenderer } from 'electron'

export default {
    name: "indexS",
    data() {
        return {
            isthebegin: false,
            hasover: false,
            hasStop: false,
            audio: null,
            starts: false,
            randomNumbers: [],
            luckyNumbers: [],
            randomInterval: null,
            maxLuckyNumbers: 20
        };
    },
    created() {
        setTimeout(() => {
            this.isthebegin = false
        }, 17000);
    },
    mounted() {
        this.audio = new Audio('https://s.17iu8.com/res/music/lottery3.mp3');
        this.audio.loop = true;
    },
    beforeDestroy() {
        this.cleanup();
    },
    methods: {
        stopAllVideos() {
            // 获取所有video元素
            const videos = document.querySelectorAll('video')

            // 停止每个视频
            videos.forEach(video => {
                video.pause()
                video.currentTime = 0
                video.removeAttribute('src') // 移除src以释放资源
                video.load() // 重新加载
            })
        },
        quitApp() {
            // 发送退出消息到主进程
            ipcRenderer.send('quit-app')
        },
        cleanup() {
            this.cleanupAudio();
            this.stopRandomGenerator();
        },
        closeto() {
            this.hasover = true;
        },
        cleanupAudio() {
            if (this.audio) {
                this.audio.pause();
                this.audio.currentTime = 0;
                this.audio.src = '';
                this.audio = null;
            }
        },
        stopchou() {
            this.stopRandomGenerator();
            this.generateAllLuckyNumbers();
            this.hasStop = true;
        },
        playAudio() {
            this.stopAllVideos()

            this.starts = true;
            this.audio.play().catch(e => {
                console.error("播放失败:", e);
            });
            this.startRandomGenerator();
        },
        startRandomGenerator() {
            this.stopRandomGenerator();
            this.randomInterval = setInterval(() => {
                const newNumbers = [];
                for (let i = 0; i < 10; i++) {
                    let num = Math.floor(Math.random() * 880) + 1;
                    newNumbers.push(num);
                }
                this.randomNumbers = newNumbers;
            }, 100);
        },
        stopRandomGenerator() {
            if (this.randomInterval) {
                clearInterval(this.randomInterval);
                this.randomInterval = null;
            }
        },
        // 一次性生成所有20个不重复的幸运号码
        generateAllLuckyNumbers() {
            this.luckyNumbers = [];
            const numbers = [];

            // 生成1-880的所有可能数字
            for (let i = 1; i <= 880; i++) {
                numbers.push(i);
            }

            // 打乱数组顺序
            for (let i = numbers.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [numbers[i], numbers[j]] = [numbers[j], numbers[i]];
            }

            // 取前20个作为幸运号码
            this.luckyNumbers = numbers.slice(0, 20);
        }
    },
};
</script>

<style scoped>
.tuichu {
    position: fixed;
    right: 50px;
    top: 50px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    z-index: 99999;
}

/* 保持原有样式不变 */
.tops {
    /* display: flex; */
    justify-items: center;
    width: 1500px;
    justify-content: center;
    position: relative;
    margin: 0 auto;
}

.close {
    position: absolute;
    right: 0;
    display: block;
    width: 80px;
    height: 80px;
    top: 120px
}

.btn1 {
    height: 0px;
    opacity: 1;
    transition: all 0.3s;
}

.btn2 {
    height: 50px;
    opacity: 0;
    transition: all 0.3s;
}

.noshow {
    opacity: 0;
    height: 0px;
    transition: all 0.3s;
}

.showstart {
    transition: all 0.3s;
    opacity: 1;
    height: 600px;
}

.bigyuan {
    position: relative;
}

.lottery_scroll_1 {
    width: 1500px;
    margin: 0 auto;
    overflow: hidden;
}

.bigyuan {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    margin: 20px;
}

.bigyuan img {
    width: 100%;
    height: 100%;
    animation: turn 6s linear infinite;
}

@keyframes turn {
    0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
        -webkit-transform: rotate(-360deg);
    }
}

.lottery_items {
    width: 20%;
    display: block;
    float: left;
}

.flex11 .lottery_items {
    width: 14%;
    display: block;
    float: left;
}

.flex11 .lottery_items .itemtxts {
    line-height: 167px !important;
    font-size: 50px;
}

.flex22 .lottery_items {
    width: 20%;
    display: block;
    float: left;
}

.flex22 .lottery_items .itemtxts {
    line-height: 190px !important;
    font-size: 40px;
}

.wenzi {
    display: block;
    width: 90%;
    margin: 0 auto;
}

.boxs {
    position: absolute;
    width: 100%;
    z-index: 99;
    top: 50%;
    transform: translateY(-50%);
}

.kaishi {
    width: 400px;
    display: block;
    margin: 0 auto;
    margin-top: 50px;
    cursor: pointer;
}

.jiang {
    width: 100%;
    margin: 0 auto;
}

.shuzi {
    margin: 0 auto;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    position: relative;
    margin-top: 10vh;
}

.itemtxts {
    position: absolute;
    text-align: center;
    line-height: 280px;
    width: 100%;
    left: 0;
    top: 0;
    font-size: 2vw;
    color: rgb(255, 248, 184);
    letter-spacing: 2px;
    text-shadow: rgb(255, 129, 1) 0px 1px, rgb(255, 129, 1) 0px 2px, rgb(255, 129, 1) 0px 3px, rgb(255, 129, 1) 0px 5px, rgba(255, 0, 0, 0.65) 0px 10px 10px, rgba(255, 0, 0, 0.65) 0px 0px 10px, rgba(255, 0, 0, 0.65) 0px 0px 15px, rgba(255, 0, 0, 0.65) 0px 0px 20px;
}

.itemtxt {
    position: absolute;
    text-align: center;
    line-height: 400px;
    width: 100%;
    left: 0;
    font-size: 3vw;
    color: rgb(255, 248, 184);
    letter-spacing: 2px;
    text-shadow: rgb(255, 129, 1) 0px 1px, rgb(255, 129, 1) 0px 2px, rgb(255, 129, 1) 0px 3px, rgb(255, 129, 1) 0px 5px, rgba(255, 0, 0, 0.65) 0px 10px 10px, rgba(255, 0, 0, 0.65) 0px 0px 10px, rgba(255, 0, 0, 0.65) 0px 0px 15px, rgba(255, 0, 0, 0.65) 0px 0px 20px;
}

.itemquan {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    animation: turn 6s linear infinite;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    display: block;
}

@keyframes turn {
    0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
        -webkit-transform: rotate(-360deg);
    }
}

video {
    width: 100%;
    height: 100vh;
    z-index: 1;
}

.shiyong {
    position: fixed;
    top: 200px;
    font-size: 40px;
    color: white;
}

.divnn {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
    background: rgb(130, 23, 15);
}
</style>